<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="../static/bootstrap-3.4.1/dist/css/bootstrap.min.css">
    <script src="../static/jQuery-v3.6.0/jQueryv3.6.0.js"></script>
    <script src="../static/bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <button type="button" margin-right="0">Button1</button>
    <button type="button"margin-left="0">Button2</button>
    <div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default" onclick="alert('heheh')">Button1</button>
         <button type="button" class="btn btn-default">Button2</button>
         <button type="button" class="btn btn-default">Button3</button>
         <button type="button" class="btn btn-default">Button4</button>
         <button type="button" class="btn btn-default">Button5</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">Button6</button>
         <button type="button" class="btn btn-default">Button7</button>
         <button type="button" class="btn btn-default">Button8</button>
         <button type="button" class="btn btn-default">Button9</button>
         <button type="button" class="btn btn-default">Button10</button>
    </div>
    </div>   
        <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">Button6</button>
         <button type="button" class="btn btn-default">Button7</button>
         <button type="button" class="btn btn-default">Button8</button>
         <button type="button" class="btn btn-default">Button9</button>
         <button type="button" class="btn btn-default">Button10</button>
    </div> 
    <div class="btn-group-vertical btn-group-lg">
        <button type="button" class="btn btn-default">Button6</button>
         <button type="button" class="btn btn-default">Button7</button>
         <button type="button" class="btn btn-default">Button8</button>
         <button type="button" class="btn btn-default">Button9</button>
         <button type="button" class="btn btn-default">Button10</button>
    </div>

    <div class="btn-group">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle"        data-toggle="dropdown">
      下列
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉链接 1</a></li>
      <li><a href="#">下拉链接 2</a></li>
    </ul>
  </div>

  <div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
  
    <div class="btn-group-vertical">
      <button type="button" class="btn btn-default dropdown-toggle"        data-toggle="dropdown">
        下拉
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">下拉链接 1</a></li>
        <li><a href="#">下拉链接 2</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="btn-group">
   <button type="button" class="btn btn-default">默认</button>
   <button type="button" class="btn btn-default dropdown-toggle"        data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">切换下拉菜单</span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">功能</a></li>
      <li><a href="#">另一个功能</a></li>
      <li><a href="#">其他</a></li>
      <li class="divider"></li>
      <li><a href="#">分离的链接</a></li>
   </ul>
</div>
<div class="btn-group">
   <button type="button" class="btn btn-primary">原始</button>
   <button type="button" class="btn btn-primary dropdown-toggle"        data-toggle="dropdown">
      <span class="caret"></span>
      <span class="sr-only">切换下拉菜单</span>
   </button>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">功能</a></li>
      <li><a href="#">另一个功能</a></li>
      <li><a href="#">其他</a></li>
      <li class="divider"></li>
      <li><a href="#">分离的链接</a></li>
   </ul>
</div>
<hr/>

<div class="btn-group">
    <button type="button" class="btn btn-default">默认</button>
    <button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown">
       <span class="caret"></span>
       <span class="sr-only">切换下拉菜单</span>
    </button>
    <ul class="dropdown-menu" role="menu">
       <li><a href="#">aaaaa</a></li>
       <li class="divider"></li>
       <li><a href="#">bbb</a></li>
       <li><a href="#">ccc</a></li>
       <li><a href="#">ddd</a></li>
       <li><a href="#">deddd</a></li>
       <li class="divider"></li>
       <li><a href="#">fff</a></li>
    </ul>
 </div>
 <div class="btn-group">
    <button type="button" class="btn btn-danger">原始</button>
    <button type="button" class="btn btn-danger dropdown-toggle"        data-toggle="dropdown">
       <span class="caret"></span>
       <span class="sr-only">切换下拉菜单</span>
    </button>
    <ul class="dropdown-menu" role="menu">
       <li><a href="#">功能</a></li>
       <li><a href="#">另一个功能</a></li>
       <li><a href="#">其他</a></li>
       <li class="divider"></li>
       <li><a href="#">分离的链接</a></li>
    </ul>
 </div>
 <hr/>

    <div class="btn-group dropup">
       <button type="button" class="btn btn-default dropdown-toggle"           data-toggle="dropdown">
          默认 <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu">
          <li><a href="#">功能</a></li>
          <li><a href="#">另一个功能</a></li>
          <li><a href="#">其他</a></li>
          <li class="divider"></li>
          <li><a href="#">分离的链接</a></li>
       </ul>
    </div>
    <div class="btn-group dropup">
       <button type="button" class="btn btn-primary dropdown-toggle"           data-toggle="dropdown">
          原始 <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu">
          <li><a href="#">功能</a></li>
          <li><a href="#">另一个功能</a></li>
          <li><a href="#">其他</a></li>
          <li class="divider"></li>
          <li><a href="#">分离的链接</a></li>
       </ul>
    </div>
   
</body>

</html>